<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">

    <title>Exam - 考试系统</title>

    <!-- TODC Bootstrap core CSS -->
    <link rel="stylesheet" href="/static/assets/yeti/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/assets/bootstrap-validator/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="/static/assets/toastr-master/toastr.css" />
    
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="/static/assets/bootstrap-validator/js/bootstrapValidator.min.js" ></script>
    <script type="text/javascript" src="/static/assets/toastr-master/toastr.js"></script>
    <script type="text/javascript" src="/static/js/common.js"></script>

    <style>
		body {
	
		  background-color: #fff;
		}
		#login-box {
			margin-top: 5%;
		}		
		.form-login {
		  max-width: 330px;
		  padding: 15px;
		  margin: 0 auto;
		}
		.login-title {
		  margin: 0 0 15px;
		  font-size: 25px;
		  font-weight: 500;
		  color: #555;
		}
		.form-login .form-control {
		  position: relative;
		  height: auto;
		  -webkit-box-sizing: border-box;
		     -moz-box-sizing: border-box;
		          box-sizing: border-box;
		  padding: 10px;
		  font-size: 16px;
		}
		.form-login .form-control:focus {
		  z-index: 2;
		}
		.form-login input[type="email"] {
		  margin-bottom: 10px;
		}
		.form-login input[type="password"] {
		  margin-bottom: 10px;
		}
		.box {
		  width: 304px;
		  padding: 20px 25px 30px;
		  margin: 0 auto 25px;
		  background-color: #f7f7f7;
		  border-radius: 2px;
		  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
		}
		.box-login {
		  width: 354px;
		  padding: 40px;
		}
		.box-login .profile-img {
		  display: block;
		  width: 96px;
		  height: 96px;
		  margin: 0 auto 10px;
		}
		#btn-sub {
		background-color: #c0c0c0 !important;
			margin-top: 28px;
			padding: 10px 24px;		
		}
		#btn-sub:hover{ 
		background-color: #A9A9A9 !important;
			color: #ffffff;
    border-color: #A9A9A9;	
		}
		
		#btn-sub:focus{ 
		background-color: #696969 !important;
			color: #ffffff;
    border-color: #696969 !important;
		}
		
		.btn-primary {
    color: #ffffff;
    background-color: #008cba;
    border-color: #E0E0E0;
		
		#code {
			max-width: 120px;
		}
		
		#code-img {
			margin-left: 12px;
		}
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <style>
  #back{
			background: url(/static/img/back3.png) ;
			background-size: 100%;
			background-attachment: fixed;
			background-size:cover;
		
		}
		
		.xxx{
		padding-left:48%;
		margin-left: auto;
		margin-right: auto;
		 text-align: center;
		}
  
  </style>

  <body id="back">

    <div id="login-box" class="container">

      <h2 class="login-title text-center"><img src="static/img/black logo.png" /></h2>

      <div class=>
        <!--<img class="img-circle profile-img" src="img/avatar.png" alt="">-->
        <form id="defaultForm" class="form-login" method="post">
        	<div class="form-group">
          	<input type="text" id="userId" name="userId" class="form-control" maxlength="20" placeholder="学号-工号">
          </div>
          <div class="form-group">
          	<input type="password" id="userPass" name="userPass" class="form-control" maxlength="20" placeholder="密码">
          </div>
          <div class="form-group">
          	<input type="text" id="code" name="code" class="input-sm" maxlength="6" placeholder="请输入验证码">
          	<img id="code-img" onclick="changeImg()" src="http://127.0.0.1:8080/code" alt="验证码" />
          </div>
          <button id="btn-sub" class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>

          <div class="checkbox">
            <a class="pull-right">帮助</a>
          </div>

        </form>
      </div>

      <p >
        <a class="xxx">XXXXX</a>
      </p>

    </div>

<script>
	function changeImg() {
		var imgSrc = $("#code-img");
		var src = imgSrc.attr("src");
		console.log(src);
		imgSrc.attr("src", chgUrl(src));
	}
	//时间戳   
	//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
	function chgUrl(url) {
		var timestamp = (new Date()).valueOf();
		//url = url.substring(0, 17);
		return url+"?"+timestamp;
		if ((url.indexOf("&") >= 0)) {
			url = url + "×tamp=" + timestamp;
		} else {
			url = url + "?timestamp=" + timestamp;
		}
		return url;
	}
$(document).ready(function() {
    $('#defaultForm')
        .bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userId: {
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: '请输入学号-工号'
                        },
                        regexp: {
                            regexp: /^[1-9]\d{3,9}$/,
                            message: '学号工号 3-10位数字'
                        }
                    }
                },
                userPass: {
                    validators: {
                        notEmpty: {
                            message: '请输入密码'
                        }
                    }
                },
                code: {
                    validators: {
                        notEmpty: {
                            message: '请输入验证码'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
            ajaxSubmit("/login",
					$("#defaultForm").serialize(),
					function(data) {
						if(data == 0) {
							toastr.error('验证码错误!', '登陆');
						}
						if(data == 1) {
							toastr.error('账号或密码错误!', '登陆');
						}
						if(data == 2) {
							window.location="/admin/index.html";
						}
						if(data == 3) {
							window.location="/exam/index.html";
						}
					},
					function(data) {
						toastr.error('网络错误!', '登陆');
					}
				);			
 
        });
});
</script>
  </body>
</html>